<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>东单办公系统-部门列表</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="media/layui/css/layui.css" media="all">
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="media/js/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
	<div class="layui-container">
		<div>
			<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1" onclick="studentAndGrade()">查看班级学生图表</button>
			<!-- 模态框（Modal） -->
			<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
								&times;
							</button>
							<h4 class="modal-title" id="myModalLabel1">
								各班级人数
							</h4>
						</div>
						<div class="modal-body">

							<div  id="dvtbusers" style="width: 600px;height:400px;"></div>

						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						</div>
					</div><!-- /.modal-content -->
				</div><!-- /.modal -->

		</div>
		<table class="layui-hide" id="test" lay-filter="test"></table>
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
			<a class="layui-btn layui-btn-xs" lay-event="edit" data-toggle="modal" data-target="#myModal">编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>

		<!-- 模态框（Modal） -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title" id="myModalLabel">
							修改班级信息
						</h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal" role="form" id="form1">
							<div class="form-group">
								<label for="id" class="col-sm-2 control-label">序号:</label>
								<div class="col-sm-10">
									<input class="form-control" name="id" id="id" type="text" disabled>
								</div>
							</div>
							<div class="form-group">
								<label for="name" class="col-sm-2 control-label">班级名称:</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="name" name="name" placeholder="请输入班级名称">
								</div>
							</div>
							<div class="form-group">
								<label for="createtime" class="col-sm-2 control-label">开班日期:</label>
								<div class="col-sm-10">
									<input type="date" class="form-control" id="createtime" name="createtime" placeholder="请输入开班日期">
								</div>
							</div>
							<div class="form-group">
								<label for="week" class="col-sm-2 control-label">周期:</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="week" name="week" placeholder="请输入周期">
								</div>
							</div>
							<div class="form-group">
								<label for="location" class="col-sm-2 control-label">开班地址:</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="location" name="location" placeholder="请输入开班地址">
								</div>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">关闭
								</button>
								<button type="button" class="btn btn-primary" id="but">
									提交更改
								</button>
							</div>
						</form>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>
	</div>
	<script src="media/layui/layui.js"></script>
	<script>
		var echarts=echarts.init(document.getElementById("dvtbusers"));
		var option={
			title:{
				text:"各班级人数",
				link:"http://www.baidu.com"
			},
			tooltip: {
				trigger: 'axis'
			},
			legend: {
				data: ['班级人数']
			},
			toolbox: {
				show: true,
				feature: {
					dataZoom: {
						yAxisIndex: 'none'
					},
					dataView: {readOnly: false},
					magicType: {type: ['line', 'bar']},
					restore: {},
					saveAsImage: {}
				}
			},
			xAxis: {
				type: 'category',
				boundaryGap: false,
				data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
			},
			yAxis: {
				type: 'value',
				axisLabel: {
					formatter: '{value}'
				}
			},
			series: [
				{
					name: '部门人数',
					type: 'line',
					data: [11, 11, 15, 13, 12, 13, 10],
				}
			]
		}
		echarts.setOption(option);




		function studentAndGrade() {
			$.ajax({
				url:'student/selectStuGrade.do',
				type:'get',
				dataType:'json',
				success:function (data) {
					console.log("后端的数据++" + data)
					console.log("后端的数据++" + data.grades)
					console.log("后端的数据++" + data.counts)

					console.log("前端的++option.xAxis.data" + option.xAxis.data)
					console.log("前端的++option.series[0].data" + option.series[0].data)

					option.xAxis.data = data.data.grades;
					option.series[0].data = data.data.counts;
					echarts.setOption(option);
				}
			})
		}
	</script>
	<script>
		layui.use(['table', 'laydate', "laypage", "layer", 'carousel', 'upload', 'element'], function(){
			//初始化table组件对象
			var table = layui.table
					,laypage =layui.laypage//分页的组件
					,layer = layui.layer//弹框
					,laydate = layui.laydate//日期组件
					,element = layui.element;//元素的操作

			//渲染table
			table.render({
				//z找到table  id叫test的组件
				elem: '#test'
				,id:"transferTable"
				,url:'grade/selectGradeAll.do'
				,totalRow: true
				//这个很关键，就是解析 json数据库中数据的 一定要注意键值
				,cols: [[
					{field:'id', title:'序号', width:100,  unresize: true, sort: true, fixed:"left"}
					,{field:'name', title:'班级名称', width:200}
					,{field:'createtime', title:'开班日期', width:200}
					,{field:'week', title:'周期', width:150}
					,{field:'location', title:'开班地址', width:230}
					,{fixed: 'right', title:'操作',  width:250, align:'center', toolbar: '#barDemo'}
				]]
				,page: true //分页开启
			});
			//搜索框有效果的情况
			var  active = {
				reload: function(){
					//执行重载
					table.reload('transferTable', {
						page: {
							curr: 1 //重新从第 1 页开始
						}
					});
				}
			};

			//监听工具条
			table.on('tool(test)', function(obj){
				var data = obj.data;
				if(obj.event === 'detail'){
					layer.alert('序号 :      ' + data.id + '<br> 班级名称: ' + data.name + '<br> 开班日期: ' +
					data.createtime + '<br> 周期:      ' + data.week + '<br> 开班地址: ' + data.location);
				} else if(obj.event === 'del'){
					layer.confirm('真的删除行么' +data.id, function(index){
						layui.$.ajax({
							type:'get',
							url:'grade/deleteGradeById.do?id=' + data.id,
							dataType:'json',
							success:function (data) {
								if (data.code == 1) {
									alert(data.msg)
								} else {
									alert("删除失败!")
								}
							}
						})
						obj.del();
						layer.close(index);
					});
				} else if(obj.event === 'edit'){
					$("#id").attr('value', data.id);
				}
			});

			$('.serchDiv .layui-btn').on('click', function(){
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});

			$('.demoTable .layui-btn').on('click', function(){
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});

		});

		$("#but").click(function () {
			var id = $("#id").val()
			$.ajax({
				type: 'get',
				url:'grade/updateGrade.do?id='+id,
				data:$("#form1").serialize(),
				dataType: 'json',
				success:function (data) {
					if (data.code == 1) {
						alert(data.msg);
						window.location.href="gradelist.html"
						/*window.parent.location.reload();*/
					} else {
						alert(data.msg)
					}
				}
			})
		})
	</script>
</body>
</html>